<template>
  <div class="container">
    <div class="mainContainer">
      <div class="top">
        <div
          :class="{ loginUnderline: isLogin }"
          :style="{ color: isLogin ? '#222226' : '#999aaa' }"
          @click="changeIsLogin"
        >
          登录
        </div>
        <div
          :class="{ loginUnderline: !isLogin }"
          :style="{ color: !isLogin ? '#222226' : '#999aaa' }"
          @click="changeIsLogin"
        >
          注册
        </div>
      </div>
      <div class="formBox">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="leftBox">
              <el-form
                ref="loginFormRef"
                :model="LoginForm"
                :rules="loginFormRules"
              >
                <el-col :span="24">
                  <el-form-item prop="username">
                    <el-input
                      prefix-icon="el-icon-s-custom"
                      v-model="LoginForm.username"
                      placeholder="请输入用户名"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item prop="password">
                    <el-input
                      :type="isShowPassword ? 'input' : 'password'"
                      prefix-icon="el-icon-unlock"
                      v-model="LoginForm.password"
                      placeholder="请输入密码"
                    >
                      <i
                        slot="suffix"
                        :class="
                          isShowPassword
                            ? 'iconfont pswIcon icon-yanjing_xianshi_o'
                            : 'iconfont pswIcon icon-guanbi'
                        "
                        @click="isShowPassword = !isShowPassword"
                      ></i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-button
                    class="loginButton"
                    @click="LoginOrRegister"
                    :type="isLogin ? 'warning' : 'success'"
                    >{{ isLogin ? '登录' : '注册' }}</el-button
                  >
                </el-col>
              </el-form>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="rightBox">
              <img
                style="width: 100%"
                src="../assets/img/welcome.jpeg"
                alt="欢迎进入"
              />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { Login, Register } from '../api/user.js';
export default {
  data() {
    return {
      isShowPassword: false,
      isLogin: true,
      LoginForm: {
        username: '',
        password: '',
      },
      loginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },
  methods: {
    changeIsLogin() {
      this.isLogin = !this.isLogin;
    },
    // 登录或注册
    LoginOrRegister() {
      this.$refs.loginFormRef.validate(async (val) => {
        if (!val) return;
        let res;
        if (this.isLogin) {
          res = await Login(this.LoginForm);
        } else {
          res = await Register(this.LoginForm);
        }
        if (res.code != 200) {
          this.isLogin
            ? this.$message.error('账号或密码错误')
            : this.$message.error('用户名已存在');
        } else {
          if (this.isLogin) {
            if (res.data.state == 1) {
              this.$store.commit('saveUserInfo', res.data);
              this.$store.commit('putInfoToLocal');
              this.$router.push('/');
              this.$message({
                type: 'success',
                message: this.isLogin ? '登录成功' : '注册成功,请登录',
              });
            } else {
              this.$message.error('用户被封禁');
            }
          } else {
            this.isLogin = true;
            this.$refs.loginFormRef.resetFields();
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: calc(100% - 50px);
  background: url('../assets/img/csdn.jpg');
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .mainContainer {
    width: 700px;
    box-sizing: border-box;
    padding: 30px 20px;
    background-color: #ebecef;
    border-radius: 20px;
    .top {
      display: flex;
      justify-content: center;
      .loginUnderline::after {
        content: '';
        display: block;
        width: 24px;
        height: 2px;
        background: #222226;
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
      }
      div {
        padding: 0 30px;
        cursor: pointer;
        position: relative;
      }
    }
    .formBox {
      margin-top: 30px;
      .leftBox {
        .loginButton {
          width: 100%;
        }
        .pswIcon {
          margin-right: 10px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
